<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8" isELIgnored="false"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Menu</title>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js" ></script>
<script type="text/javascript" src="monitor.js" ></script>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet"
	href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"
	integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
	crossorigin="anonymous">

<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet"
	href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"
	integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp"
	crossorigin="anonymous">

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script
	src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"
	integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
	crossorigin="anonymous"></script>
<style type="text/css">
body {
	background-color: honeydew;
	font: 2em Georgia, serif;
}

#content {
	background-color: rgb(255, 255, 255, 0.95);
	width:800px;
	height: 510px;
	margin-left:23%;
	margin-top: 1%;
	display: block;
}
.header {
	width: 100%;
	height: 80px;
	margin-bottom: 20px;
}
#addbtn{
	margin-left:85%;
}
a {
	color: #4a4744;
	text-decoration: none;
}

a:hover {
	color: #ff7d0a;
}

a:active {
	color: #ee7204;
}
img{
	width:125px;
	height:100px;
}
</style>

</head>
<body>

	<div id="content">
		<div class="header" style="font:italic 3em Georgia, serif;text-align:center">
			<h1>Welcome ${sessionScope.name }!</h1>
			<h2 style="color: cadetblue;font:bold">FoodList</h2>
			<input type="hidden" name="icnum" id="icnum"  value="${sessionScope.icnum }"/>
		</div>
		<a href="toaddfood" id="addbtn"class="btn btn-success active">Add Food</a>
		<table id="datatable" class="table table-hover">
		   <thead>
			<tr>
				<th>Picture</th>
				<th>Name</th>
				<th>Price</th>
				<th>Type</th>
				<th>Delete</th>
				<th>Update</th>
			</tr>
			</thead>
			<tbody id="tbody">
			<c:forEach items="${list }" var="f">
				<tr>
					<td><img style="width: 125px; height: 100px;"
						src="${f.fimage }" /></td>
					<td>${f.fname }</td>
					<td>${f.fprice }</td>
					<td>${f.ftype }</td>
					<td><button class="delbt btn btn-danger " id="${f.fid }">Delete</button></td>
					<td><a href="toupdate?fid=${f.fid }"  class="btn btn-primary active" >Update</a></td>
				</tr>
			   </c:forEach>
			</tbody>
		</table>
	</div>
</body>
<script type="text/javascript">
   $(function(){
   function Dataoperator(){}
           var dataOperator = new Dataoperator();
          dataOperator.showTable = function(data){
        	  var table=$("table").addClass("table table-hover");
              var tbody = $("#tbody");
                 tbody.empty();
                 data.forEach(item=>{
                   var tr = $("<tr></tr>");
                   var  img = $("<img></img>");
                   img.attr("src",item.fimage);
				   var imgtd = $("<td></td>");
                   var nametd = $("<td>"+item.fname+"</td>");
                   var pricetd = $("<td>"+item.fprice+"</td>");
                   var typtd = $("<td>"+item.ftype+"</td>");
                   var deletetd = $("<td></td>");
                   var updtd = $("<td></td>");
                   var delbt = $("<button>Delete</button>");
                   var upa = $("<a>Update</a>").addClass("btn btn-primary active");
                    delbt.attr("class","delbt btn btn-danger").attr("id",item.fid);
                    
                    upa.attr("href","toupdate?fid="+item.fid);
                    imgtd.append(img);
                    deletetd.append(delbt);
                    updtd.append(upa);
				    tr.append(imgtd);
                    tr.append(nametd);
                    tr.append(pricetd);
                     tr.append(typtd);
                    tr.append(deletetd);
                    tr.append(updtd);
                    tbody.append(tr);
                 }); 
          }
          dataOperator.addDelEvent = function(){
               $(".delbt").on("click",function(){
                       var id  = $(this).attr("id");
                      $.ajax({
                         type:'GET',
                         url:'http://localhost:8089/merchantv2/deletefood?fid='+id
                    }).done(function(msg){
          			 //alert(msg);
                  if(msg==1){
                     loadTable(dataOperator);
                   }
                  }); 
               });
          }
       dataOperator.addDelEvent();
     function loadTable(dataOperator){
        $.ajax({
             type:'GET',
              url:'http://localhost:8089/merchantv2/foodlist4ajax'
           }).done(function(msg){
           //alert(msg.length);
                 dataOperator.showTable(msg);
                 dataOperator.addDelEvent();
           });     
     }
   });

</script>
</html>